<template>
	<cl-page :padding="20">
		<view class="page" v-if="user && list.length > 0">
			<view class="list-card" @click="gotoCode(item._id)" v-for="(item,index) in list" :key="index">
				<cl-list-item label="货主名称">{{item.owner_name}}</cl-list-item>
				<view class="list-item">
					<text class="list-item-lable">标识码</text>
					<text class="list-item-value">{{item.code}}</text>
				</view>
			</view>
		</view>
		<view v-else-if="!user" class="empty">
			请先返回首页登录哟！
			<cl-button color="#fff" background-color="#008c8c" class="empty-btn" @click="gotoIndex">返回首页</cl-button>
		</view>
		<view v-else class="empty">
			暂无数据！
		</view>
		<cl-button v-if="user" size="large" round fill @tap="gotoCode()" color="#fff" class="footer"
			background-color="#008c8c" :style="{bottom: isIphone ? '198rpx' : '130rpx'}">
			新增货主
		</cl-button>
		<tabbar :code="user" />
	</cl-page>
</template>
<script lang="ts" setup>
	import Tabbar from "./components/tabbar.vue";
	import { ref } from 'vue';
	import { useCool } from "/@/cool";
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { onPullDownRefresh } from "@dcloudio/uni-app";

	const isIphone = ref(false)
	onLoad(() => {
		uni.getSystemInfo({
			success: res => {
				let model = res.model;
				if (model.includes('iPhone')) {
					isIphone.value = true;
				} else {
					isIphone.value = false;
				}
			}
		})
	})
	const list = ref<any[]>([])
	const { storage } = useCool()
	const gotoCode = (id ?: any) => {
		if (id) {
			uni.navigateTo({
				url: `/pages/index/code?id=${id}`,
			});
		} else {
			uni.navigateTo({
				url: `/pages/index/code`,
			});
		}
	};
	const gotoIndex = () => {
		uni.switchTab({
			url: `index`,
		});
	};
	const user = ref('')
	onPullDownRefresh(async () => {
		user.value = storage.get("code");
		if (!user.value) {
			if (storage.get('uni_id_token')) {
				const uniIdCo = uniCloud.importObject('uni-id-co')
				uniIdCo.refreshToken()
				try {
					const res = await uniIdCo.getAccountInfo()
					user.value = res.data.username || ''
				} catch {
					user.value = ""
				}
			}

		}
		if (user.value === "admin") {
			const db = uniCloud.importObject('cc_code') //第一步导入云对象
			const { data } = await db.list()
			list.value = data || []
		}
		setTimeout(() => {
			uni.stopPullDownRefresh(); // 停止下拉刷新
		}, 1000);
	})
	onShow(async () => {
		user.value = storage.get("code");
		if (!user.value) {
			if (storage.get('uni_id_token')) {
				const uniIdCo = uniCloud.importObject('uni-id-co')
				uniIdCo.refreshToken()
				try {
					const res = await uniIdCo.getAccountInfo()
					user.value = res.data.username || ''
				} catch {
					user.value = ""
				}
			}

		}
		if (user.value === "admin") {
			const db = uniCloud.importObject('cc_code') //第一步导入云对象
			const { data } = await db.list()
			list.value = data || []
		}

	})
</script>
<style scoped>
	.page {
		padding-bottom: 200rpx;
	}

	.list-card {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		padding: 0 10rpx 10rpx;
		margin-bottom: 20rpx;

	}

	.list-item {
		display: flex;
		padding: 10rpx;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.list-item-lable {
		color: #c2c2c2;
	}

	.list-item-value {
		color: black;
	}

	.empty {
		/* background-color: #fff; */
		padding-top: 400rpx;
		display: flex;
		flex-direction: column;
		/* 		justify-content: center; */
		align-items: center;
		color: #b2b2b2;
	}

	.empty-btn {
		margin-top: 20rpx;
	}

	.footer {
		position: fixed;
		bottom: 130rpx;
		width: calc(100% - 40rpx);
	}
</style>